import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, Radio, TreeSelect, Select } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class ResourceModal extends Component {
    constructor(props) {
        super(props);
    }

    okHandler = () => {
        const { onOk } = this.props;
        this.props.form.validateFields((err, values) => {
            if (!err) {
                onOk(values);
            }
        });
    };

    render() {

        const { children, user, dispatch, item, depts, ipParamIdList, resourceGroupIdList, roles, currentDept } = this.props;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };
        const getIpParam = data => data.map((item) => {
            return <Option key={item.id_ + ''}>{item.networkName}</Option>
        })
        const getResourceGroup = data => data.map((item) => {
            return <Option key={item.id_ + ''}>{item.groupName}</Option>
        })
        return (
            <span>
                <Modal
                    maskClosable={this.props.maskClosable}
                    confirmLoading={this.props.confirmLoading}
                    title={this.props.title}
                    visible={this.props.visible}
                    onOk={this.okHandler}
                    onCancel={this.props.onCancel}
                    key={this.props.newKey}
                >
                    <Form layout='horizontal' onSubmit={this.okHandler}>
                        <FormItem style={{ marginBottom: '0px' }}>
                            {getFieldDecorator('id', { initialValue: item.id_ })(
                                <Input type="hidden" />
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="资源名称"
                            hasFeedback
                        >
                            {
                                getFieldDecorator('name', {
                                    initialValue: item.name,
                                    rules: [{
                                        required: true, whitespace: true, message: '请输入资源名称',
                                    }]
                                })(<Input placeholder="请输入资源名称" />)
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="ip地址"
                            hasFeedback
                        >
                            {
                                getFieldDecorator('ip', {
                                    initialValue: item.ip,
                                    rules: [{
                                        required: true, whitespace: true, message: '请输入ip地址',
                                    }]
                                })(<Input placeholder="请输入ip地址" />)
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="业务应用"
                            hasFeedback
                        >
                            {
                                getFieldDecorator('businessApplication', {
                                    initialValue: item.businessApplication,
                                    rules: [{
                                        required: true, whitespace: true, message: '请输入业务应用',
                                    }]
                                })(<Input placeholder="请输入业务应用" />)
                            }
                        </FormItem>
                        {/* <FormItem
                            {...formItemLayout}
                            label="ip参数"
                            hasFeedback
                        >
                            {
                                getFieldDecorator('paramId', {
                                    initialValue: item.paramId_ ? item.paramId_ + '' : '',
                                    rules: [{
                                        required: true, whitespace: true, message: '请选择IP参数',
                                    }]
                                })(
                                    <Select
                                        showSearch
                                        placeholder="选择IP参数"
                                        optionFilterProp="children"
                                    >
                                        {getIpParam(ipParamIdList)}
                                    </Select>
                                    )
                            }
                        </FormItem> */}
                        <FormItem
                            {...formItemLayout}
                            label="选择资源组"
                            hasFeedback
                        >
                            {
                                getFieldDecorator('resourceGroupId', {
                                    initialValue: item.resourceGroupId_ ? item.resourceGroupId_ + '' : '',
                                    rules: [{
                                        required: true, whitespace: true, message: '请选择资源组',
                                    }]
                                })(
                                    <Select
                                        showSearch
                                        placeholder="选择资源组"
                                        optionFilterProp="children"
                                    >
                                        {getResourceGroup(resourceGroupIdList)}
                                    </Select>
                                    )
                            }
                        </FormItem>


                        <FormItem
                          {...formItemLayout}
                            label="备注"
                            hasFeedback
                        >
                            {
                                getFieldDecorator('remark', {
                                    initialValue:item.remark?item.remark:'',
                                    rules: [{ max: 200, message: '备注信息 200 字符以内' },]
                                })(<Input style={{ width: '400px' }} type="textarea" autosize={{ minRows: 4, maxRows: 4 }} />)
                            }
                        </FormItem>
                    </Form>
                </Modal>
            </span>
        );
    }

}

export default Form.create()(ResourceModal)
